<template>
  <p class="p">医美定制</p>
  <div class="flex">
    <router-link
      class="imgs"
      v-for="(item, index) in data.list"
      :key="index"
      :to="item.url"
    >
      <img class="img" :src="item.url" alt="" />
      <span class="span">{{ item.msg }}</span>
    </router-link>
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    const data = reactive({
      list: [
        {
          url: "http://121.40.124.132:3000/images/cus/jingping.png",
          msg: "韩束紧致抗皱抗衰老高机能面霜",
        },
        {
          url: "http://121.40.124.132:3000/images/cus/jingping.png",
          msg: "韩束紧致抗皱抗衰老高机能面霜",
        },
        {
          url: "http://121.40.124.132:3000/images/cus/jingping.png",
          msg: "韩束紧致抗皱抗衰老高机能面霜",
        },
        {
          url: "http://121.40.124.132:3000/images/cus/jingping.png",
          msg: "韩束紧致抗皱抗衰老高机能面霜",
        },
        {
          url: "http://121.40.124.132:3000/images/cus/jingping.png",
          msg: "韩束紧致抗皱抗衰老高机能面霜",
        },
        {
          url: "http://121.40.124.132:3000/images/cus/jingping.png",
          msg: "韩束紧致抗皱抗衰老高机能面霜",
        },
      ],
    });
    return {
      data,
    };
  },
};
</script>

<style lang="less" scoped>
.p {
  font-size: 16px;
  font-weight: 900;
  margin-left: 16px;
  margin-bottom: 10px;
  margin-top: 30px;
}
.flex {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.imgs {
  width: 104px;
  height: 140px;
}
.img {
  width: 104px;
  height: 104px;
  border: 1px solid #ccc;
}
.span {
  font-size: 12px;
  display: block;
  font-weight: 900;
  text-align: center;
  margin-bottom: 20px;
}
</style>
